import React, { useEffect, useState } from "react";
import { Input, Button, Row, message, Modal, Popconfirm } from "antd";
import styles from "./index.less";
import { getCurrentTenant } from "../../../utils/utils";
import api from "../systemApi";

const { TextArea, Password } = Input;

export default () => {
  const [pwdShow, setPwdShow] = useState(false);
  const [tenantName, settenantName] = useState(getCurrentTenant().tenantName);
  const [tenantCode, settenantCode] = useState(
    getCurrentTenant().tenantCode[0]
  );
  const [tenantDesc, settenantDesc] = useState("");
  const [pwdOfKey, setpwdOfKey] = useState("");
  const [key, setkey] = useState("");
  const [loading, setloading] = useState(false);
  const [isModalVisible, setisModalVisible] = useState(false);
  useEffect(() => {
    if (getCurrentTenant().id === "100000") {
      message.warning("请选择一个租户！");
      settenantName("");
      settenantDesc("");
      settenantCode("");
    } else if (getCurrentTenant().tenantCode[0]) {
      api
        .getTenantByCode({ tenantCode: getCurrentTenant().tenantCode[0] })
        .then(res => {
          if (res.success) {
            settenantName(res.datas.tenantName);
            settenantDesc(res.datas.keyDescription);
            settenantCode(res.datas.tenantCode);
            setkey(res.datas.keyName);
          }
        });
    } else {
      message.error("无租户信息");
    }
  }, []);

  const onSave = () => {
    if (getCurrentTenant().tenantCode[0]) {
      setloading(true);
      const param = {
        tenantCode,
        keyDescription: tenantDesc
      };
      api.updateTenantByCode(param).then(res => {
        if (res.success) {
          message.success("操作成功");
        } else {
          message.error(res.errMsg);
        }
        setloading(false);
      });
    } else {
      message.error("无租户信息");
    }
  };

  const onRefreshKey = () => {
    if (tenantCode) {
      api.updateKeyName({ tenantCode }).then(res => {
        if (res.success) {
          message.success("操作成功");
          setkey(res.datas);
        } else {
          message.error(res.errMsg);
        }
      });
    } else {
      message.error("无租户信息");
    }
  };

  const onLookKey = () => {
    if (pwdShow) {
      setPwdShow(!pwdShow);
    } else {
      setpwdOfKey("");
      setisModalVisible(true);
    }
  };

  const handleOk = () => {
    if (!pwdOfKey) {
      message.error("请输入密码");
      return;
    }
    if (!getCurrentTenant().userName) {
      message.error("租户所属账户信息不存在");
      return;
    }
    api
      .checkLogin({
        userAccount: getCurrentTenant().userName,
        passWd: pwdOfKey,
        type: 1
      })
      .then(res => {
        if (res.success) {
          message.success("密码校验通过");
          setisModalVisible(false);
          setPwdShow(!pwdShow);
        } else {
          message.error("校验失败");
        }
      });
  };
  return (
    <div className={styles.root}>
      <div className={styles.titleBox}>租户信息</div>
      <div className={styles.body}>
        <p style={{ marginTop: 20 }}>租户名称</p>
        <Input readOnly value={tenantName} />
        <p style={{ marginTop: 30 }}>租户编码</p>
        <Input value={tenantCode} readOnly />
        <p style={{ marginTop: 30 }}>描述</p>
        <TextArea
          value={tenantDesc}
          onChange={e => settenantDesc(e.target.value)}
        />
        <p style={{ marginTop: 30 }}>租户秘钥</p>
        {pwdShow && <Input value={key} readOnly />}
        {!pwdShow && <Password value={key} readOnly visibilityToggle={false} />}
        <Button type="link" onClick={onLookKey}>
          {pwdShow ? "隐藏秘钥" : "查看秘钥"}
        </Button>
        {pwdShow && (
          <Popconfirm
            title="确定重新生成秘钥?"
            onConfirm={onRefreshKey}
            okText="确定"
            cancelText="取消"
          >
            <Button type="link">重新生成秘钥</Button>
          </Popconfirm>
        )}
        <Row style={{ marginTop: 30 }}>
          <Button loading={loading} type="primary" onClick={onSave}>
            更新信息
          </Button>
        </Row>
      </div>
      <Modal
        title="密码校验"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={() => setisModalVisible(false)}
      >
        <Input
          placeholder="请输入密码"
          value={pwdOfKey}
          onChange={e => setpwdOfKey(e.target.value)}
        />
      </Modal>
    </div>
  );
};
